import {
  Table,
  Button,
  Form,
  Input,
  DatePicker,
  Modal,
  message,
  Select,
  Cascader,
  type TableProps,
} from "antd";

import React, { useEffect, useState } from "react";
import style from "./index.module.scss";
import { getStorage } from "@/api/order";
import { columns } from "./columns";
import Add from './add'
const { RangePicker } = DatePicker;

type searchValeType = {
  query?: string;
  addStartTime?: string;
  addFinishTime?: string;
};

const Home: React.FC = () => {
  // type LayoutType = Parameters<typeof Form>[0]["layout"];
  // options
  const [total, setTotal] = useState(0);
  const [dataSource, setDataSource] = useState([]);
  const pagination = {
    total: 0,
    page: 1,
    limit: 10,
  };

  useEffect(() => {
    // getDataList();
  }, []);

  const [form] = Form.useForm();
  const getDataList = async (obj = {}) => {
    getStorage({
      ...obj,
      page: pagination.page,
      limit: pagination.limit,
    }).then((res) => {
      console.log(res);

      setTotal(res.data.total);
      // setPagination({
      //   page: pagination.page,
      //   limit: pagination.limit,
      //   total: res.data.total,
      // });

      setDataSource(res.data.list);
    });
    // .catch((err) => {
    //   console.log(err, "==");
    // });
  };
  const onChangePage = (page: number, pageSize: number) => {
    pagination.page = page;
    pagination.limit = pageSize;
    getDataList();

    // setPagination({
    //   page: pageSize,
    //   limit: page,
    //   total: pagination.total,
    // });
    // setTimeout(() => {
    //   console.log(page, pageSize, pagination, "===");
    // }, 100);
    // getDataList();
  };

  const onFinish = (values: any) => {
    let obj: searchValeType = {
      query: values.query,
      addStartTime: values.time ? values?.time[0].format("YYYY-MM-DD") : "",
      addFinishTime: values.time ? values.time[1]?.format("YYYY-MM-DD") : "",
    };
    getDataList(obj);
  };
  const columnProps = {
    columns: columns,
    rowKey: "id",
    pagination: {
      total: total,
      onChange: onChangePage,
      pageSizeOptions: [10, 50, 100],
    },
    scroll: { x: 1500, y: 300 },
  };
  return (
    <>
      <Form
        form={form}
        name="advanced_search"
        className={style.advanced_search}
        onFinish={onFinish}
        layout="inline"
      >
        <Form.Item name="query">
          <Input placeholder="网点名称/网点编码/负责人" allowClear />
        </Form.Item>
        <Form.Item name="time" label="经营类型">
          <Select
            options={[
              { value: "1", label: "直营" },
              { value: "2", label: "加盟" },
              { value: "3", label: "临时" },
            ]}
          />
        </Form.Item>
        <Form.Item name="query" label="地址">
          {/*            onChange={onChange} */}
        </Form.Item>
        <Form.Item name="time" label="创建时间">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table {...columnProps} dataSource={dataSource} />
      <Add />
    </>
  );
};

export default Home;
